<template>
  <div class="card-wrapper" v-if="props.source">
    <div
      class="cover"
      :style="{
        backgroundImage: `url(${
          props.source?.src || props.source?.screenshot || defaultImg
        })`,
      }"
    ></div>
    <slot :row="props.source">
      <div
        class="card-info"
      >
        <img
          :src="props.source?.src || props.source?.screenshot || defaultImg"
          class="title-icon"
        />
        <div class="info-box">
          <h5>{{ props.source?.title || props.source?.name || '' }}</h5>
          <p>{{ props.source?.describe || '' }}</p>
        </div>
      </div>
    </slot>
  </div>
</template>
<script setup name="MobileCard.vue">
import { defineProps } from 'vue';
import defaultImg from '../../assets/imgs/banner/03.png';

const props = defineProps({
  source: {
    type: Object,
    default: () => {},
  },
  parentCom: {
    type: String,
    default: 'home',
  },
  customClass: String,
});
</script>
<style scoped lang="less">
.card-wrapper {
  width: 100%;
  height: 8.2667rem;
  border-radius: 0.8rem;
  overflow: hidden;
  position: relative;
  box-shadow: 0 0 4px #ddd;
  .cover {
    // border-radius: 15px;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    overflow: hidden;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
  }
  .card-info {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3rem;
    width: 100%;
    border-top-left-radius: 0.8rem;
    border-top-right-radius: 0.8rem;
    box-shadow: 0 2px 4px #ddd;
    overflow: hidden;
    display: grid;
    grid-template-columns:1.9rem calc(100% - 2rem);
    align-items: center;
    background-color: #fff;
    .title-icon {
      width: 1.4rem;
      height: 1.4rem;
      border-radius: 50%;
      margin-left: 0.3rem;
    }
    .info-box {
      width: 100%;
      h5 {
        margin: 0;
        padding: 0;
        font-size: 0.8rem;
        line-height: 1.1rem;
        color: #444;
        font-weight: 400;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      p {
        padding: 0;
        margin: 0;
        font-weight: 200;
        font-size: 0.75rem;
        line-height: 1.1rem;
        color: #555;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
</style>
